<!-- 通用表单组件 -->
<template>
  <el-form
    ref="formRef"
    :model="modelValue"
    :rules="rules"
    :label-width="labelWidth"
    v-bind="$attrs"
  >
    <el-row :gutter="gutter">
      <template v-for="field in formFields" :key="field.prop">
        <el-col v-bind="field.col || { span: 24 }">
          <el-form-item :label="field.label" :prop="field.prop">
            <!-- 输入框 -->
            <el-input
              v-if="field.type === 'input'"
              v-model="modelValue[field.prop]"
              v-bind="field.attrs"
              :placeholder="field.placeholder || `请输入${field.label}`"
            />
            
            <!-- 文本域 -->
            <el-input
              v-else-if="field.type === 'textarea'"
              v-model="modelValue[field.prop]"
              type="textarea"
              v-bind="field.attrs"
              :placeholder="field.placeholder || `请输入${field.label}`"
            />
            
            <!-- 数字输入框 -->
            <el-input-number
              v-else-if="field.type === 'number'"
              v-model="modelValue[field.prop]"
              v-bind="field.attrs"
            />
            
            <!-- 选择器 -->
            <el-select
              v-else-if="field.type === 'select'"
              v-model="modelValue[field.prop]"
              v-bind="field.attrs"
              :placeholder="field.placeholder || `请选择${field.label}`"
            >
              <el-option
                v-for="option in field.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
            
            <!-- 开关 -->
            <el-switch
              v-else-if="field.type === 'switch'"
              v-model="modelValue[field.prop]"
              v-bind="field.attrs"
            />
            
            <!-- 日期选择器 -->
            <el-date-picker
              v-else-if="field.type === 'date'"
              v-model="modelValue[field.prop]"
              v-bind="field.attrs"
              :placeholder="field.placeholder || `请选择${field.label}`"
            />
            
            <!-- 自定义插槽 -->
            <slot 
              v-else-if="field.type === 'slot'" 
              :name="field.slotName" 
              :model="modelValue"
              :field="field"
            />
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  },
  formFields: {
    type: Array,
    required: true
  },
  rules: {
    type: Object,
    default: () => ({})
  },
  labelWidth: {
    type: String,
    default: '100px'
  },
  gutter: {
    type: Number,
    default: 20
  }
})

const emit = defineEmits(['update:modelValue'])

const formRef = ref()

// 提供给父组件调用的方法
defineExpose({
  validate: () => formRef.value.validate(),
  resetFields: () => formRef.value.resetFields(),
  clearValidate: () => formRef.value.clearValidate()
})
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>